<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{$site_info.site_seo_title|default=''}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}"/>
    <meta name="description" content="{$site_info.site_seo_description|default=''}"/>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/fly/css/global.css">
</head>
<body>
{include file='common/header' /}
<div class="layui-container fly-marginTop">
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="cashier">
            <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                <div class="content-header">
                    <div class="left">
                        <h3 style="font-weight: bold">订单提交成功</h3>
                        <p>请您在内<span style="color:red">10分钟</span>完成支付,否则订单会自动取消</p>
                    </div>
                    <div class="right">
                        <p>
                            应付金额
                            <span>￥0.01</span>
                        </p>
                        <p>订单编号: 20220713110000</p>
                    </div>
                </div>
                <div class="content-middle">
                    <div class="list">
                        <p>
                            支付宝
                        </p>
                    </div>
                    <div class="list">
                        <p>
                            微信
                        </p>
                    </div>
                    <div class="list">
                        <p>云闪付</p>
                    </div>
                    <div class="list">
                        <p>京东支付</p>
                    </div>
                </div>
                <div class="content-footer">
                    <button type="button" class="layui-btn layui-btn-danger">下一步</button>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .content-header {
        width: 100%;
        height: 50px;
    }
    .content-header .left {
        width: 50%;
        float: left;
    }
    .content-header .right {
        width: 50%;
        float: right;
    }
    .content-header .right p {
        width: 100%;
        text-align: right;
    }

    .content-header .right p span {
        font-size: 20px;
        color:red;
    }

    .content-middle {
        height: 450px
    }
    .content-middle .list {
        float:left;
        width: 26%;
        height: 60px;
        margin: 2%;
        padding:10px 15px;
        border: #eee solid 1px
    }

    .content-middle div:hover {
        border-color: red;
    }

    .content-middle .list p {
        position: relative; left: 50%; top: 50%; width:80px;height: auto; transform:translate(-50%,-50%);
        font-size: 20px; line-height: 35px;
    }

    .content-footer {
        width: 100%;
        position: absolute;
    }
    .content-footer .layui-btn {
        display: block;
        width: 120px;
        margin: 0 auto;
    }
</style>
{include file='common/footer' /}
<script>

    layui.use('jquery', function (){
        var $ = layui.$;

        $(".content-middle div").click(function(){
            $(this).css("border-color","red").siblings().css("border-color","#eee");
            $(this).css("cursor","pointer")
        })

    });
</script>
</body>
</html>
